<template>
  <div>
    <el-button  type="primary" size="small" @click="goEdit">编辑</el-button>
    <el-drawer
        title="编辑用户"
        size="450px"
        :destroy-on-close="true"
        :visible.sync="dialogVisible">
      <userForm ref="userForm"></userForm>
      <div class="btnBox flex-center">
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import userForm from "@/views/systemManage/user/module/userForm";
export default {
  name: "editUserBtn",
  props:{
    params:{
      default:()=>{}
    }
  },
  components:{
    userForm
  },
  data(){
    return {
      dialogVisible:false
    }
  },
  methods:{
    submit(){
      this.$refs.userForm.validate().then(res=>{
        let params = {
          ...this.$refs.userForm.form,
          roleIds:this.$refs.userForm.form.roleIds.join(',')
        }
        this.$api.editUsers(params).then(res=>{
          this.dialogVisible = false
          this.$message.success('编辑成功')
          this.$emit('after-op')
        })
      })
    },
    goEdit(){
      this.dialogVisible = true
      this.$nextTick(()=>{
        Object.keys( this.$refs.userForm.form).forEach(x=>{
          this.$refs.userForm.form[x] = this.params[x]
        })
        this.$refs.userForm.form.roleIds =  this.$refs.userForm.form.roleIds.split(',').map(x=>parseInt(x))
      })
    },
  },
}
</script>

<style scoped>

</style>